<template>
	<view class="content">
		<u-navbar title="财税、法律、管理老师" :is-back="false" :color="titleColor"></u-navbar>
		<view class="search-box flex">
			<u-icon name="search" color="#989A9D" size="28" class="search-icon"></u-icon>
			<u-input v-model="serchValue" class="search-input" placeholder="请输入老师姓名搜索" :clearable="false" />
		</view>
		<view class="u-flex u-row-between tuijian-teacher">
			<view class="title">推荐老师</view>
			<!-- <view>更多</view> -->
		</view>
		<view class="wrap-box">
			<view class="card-swiper1 animation-fade" style="white-space: nowrap;">
				<view v-for="(item,index) in list" :key="index" class="swiper-item" style="transform: scale(1);"
					@click="gotodetail(item)">
					<image :src="item.face" class="touxiang" mode="aspectFill"></image>
					<view style="font-size: 32rpx;color: #333333;margin-top: 15rpx;">{{item.nickName}}</view>
					<image class="animation-fade" v-if="item.isRenzheng" src="../../static/img/label-teacher-l.png" mode="widthFix"
						style="width: 100rpx;margin: 0 auto;margin-top: 10rpx;"></image>
				</view>
			</view>
		</view>
		<view class="line"></view>
		<view class="u-flex u-row-between tuijian-teacher">
			<view class="title">全部老师</view>
			<!-- <view @click="tiaozhuan()">更多</view> -->
		</view>
<!-- 		<view style="overflow-x: scroll;color: #888888;font-size: 32rpx;white-space: nowrap;padding-left: 32rpx;">
			<view v-for="(item,index) in inList" @click="selitem(index)"
				style="margin: 0 40rpx 0 0;display: inline-block;">
				<view style="display: flex; animation-fade">
					<image src="../../static/img/ic-tab-all.png"
						style="width: 34rpx;height: 34rpx;position: relative;top: 6rpx;margin-right: 5rpx;"
						v-if="index==0"></image>
					<image :src="item.industryIcon"
						style="width: 34rpx;height: 34rpx;position: relative;top: 6rpx;margin-right: 5rpx;"
						v-if="index>0"></image>
					<view :class="[{'itemselect':item.isselect}]">{{item.industryName}}</view>
				</view>
			</view>
		</view> -->
		<view class="teacher-list">
			<view class="teacher-item u-flex u-row-between animation-fade" v-for="(item,index) in teachers" @click="gotodetail(item)">
				<image :src="item.face" class="avatar" mode="aspectFill"></image>
				<view class="content">
					<view class="name" style="display: flex;">
						<view>{{item.nickName}}</view>
						<image class="animation-fade" v-if="item.isRenzheng" src="../../static/img/label-teacher-l.png"
							style="width: 100rpx;margin-left: 8rpx;margin-top: 10rpx;" mode="widthFix"></image>
					</view>
					<view class="produce">{{item.jianjie}}</view>
				</view>
			</view>
		</view>
		<view style="width: 100%;height: 120rpx;"></view>
	</view>
</template>

<script>
	import {
		getTeachList,
		getGoodsCollection,
		deleteGoodsCollection,
		deleteStoreCollection,
	} from "@/api/members.js";
	import {
		http,
		Method
	} from "@/utils/request.js";
	import storage from "@/utils/storage.js";
	export default {
		data() {
			return {
				total: 0,
				pageNumber: 1,
				titleColor: "#000000",
				value: null,
				// list: [{
				// 		id: 1,
				// 		name: "吴老师",
				// 		"url": 'https://img1.baidu.com/it/u=3618488725,913663394&fm=253&fmt=auto&app=138&f=PNG?w=493&h=338',
				// 		flag: true,
				// 	},
				// 	{
				// 		id: 1,
				// 		name: "吴老师",
				// 		"url": 'https://img0.baidu.com/it/u=2830253347,2392697328&fm=253&fmt=auto&app=138&f=JPG?w=342&h=500',
				// 		flag: true,
				// 	},
				// 	{
				// 		id: 1,
				// 		name: "吴老师",
				// 		"url": 'https://cdn.uviewui.com/uview/swiper/1.jpg',
				// 		flag: true,
				// 	},
				// 	{
				// 		id: 1,
				// 		name: "吴老师",
				// 		"url": 'https://cdn.uviewui.com/uview/swiper/2.jpg',
				// 		flag: true,
				// 	},
				// ],
				list:[],
				inList: [],
				teachers:[],
				// teachers: [{
				// 		id: 1,
				// 		avatar: "https://img0.baidu.com/it/u=2830253347,2392697328&fm=253&fmt=auto&app=138&f=JPG?w=342&h=500",
				// 		produce: "老师简介老师简介老师简介老师简介老师简介老师简介老师简介老师简介老师简介老老师简介老师简介老师简介",
				// 		name: "吴老师",
				// 		flag: true,
				// 	},
				// 	{
				// 		id: 1,
				// 		avatar: "https://img1.baidu.com/it/u=3618488725,913663394&fm=253&fmt=auto&app=138&f=PNG?w=493&h=338",
				// 		produce: "老师简介老师简介",
				// 		name: "吴老师",
				// 		flag: true,
				// 	}
				// ]
			}
		},
		async mounted() {
			await this.getAllLiIndustry();
			this.getTeachs();
			this.getTuijianTeachs()
		},
		onReachBottom() {

		},

		methods: {
			getTeachs() {
				let params = {
					pageNumber: this.pageNumber,
					pageSize: 9999,
					order: "desc",
					disabled: "OPEN",
					isTeacher: true,
				}
				getTeachList(params).then(res => {
					let list=res.data.result.records ||[];
					this.teachers=[...list]
				})
			},
			
			getTuijianTeachs() {
				let params = {
					pageNumber: this.pageNumber,
					pageSize: 9999,
					order: "desc",
					disabled: "OPEN",
					isTeacher: true,
					isTuijian:true,
				}
				getTeachList(params).then(res => {
					let list=res.data.result.records ||[];
					this.list=[...list]
				})
			},
			gotodetail(item) {
				uni.navigateTo({
					url: "/pages/verticalnav/teacher-detail?id=" + item.id
				})
			},
			async getAllLiIndustry() {
				let user = storage.getUserInfo();
				let params = {
					pageNumber: 1,
					pageSize: 999,
					deleteFlag: false,
					sort: "create_time",
					order: "desc",

				}
				uni.showLoading({
					title: "加载中",
					mask: true
				})
				let res = await http.request({
					url: "/lili/liQuestions/getAllLiIndustry",
					method: Method.GET,
					needToken: true,
					params,
				});
				uni.hideLoading()
				let data = res.data.result.records || [];
				let inList = []
				let obj = {
					"industryName": "全部",
					"isselect": true,
					"id": null,
				}
				inList.push(obj)
				let gfinList = []
				data.forEach(item => {
					item["isselect"] = false;
					if (item.isAdmin) {
						if (gfinList.length == 0) {
							item["isselect"] = true;
							this.gfinListselLiIndustryId = item["id"];
						}
						gfinList.push(item)
					} else {
						inList.push(item)
					}

				});

				// inList = inList.concat(data);
				console.log("inList", inList)
				this.inList = [...inList];
				this.gfinList = [...gfinList];

			},
			selitem(index) {
				let inList = [...this.inList];
				inList.forEach((item, index1) => {
					item["isselect"] = false;
					if (index == index1) {
						item["isselect"] = true;
					}
				});
				this.inList = [...inList]
			},
			tiaozhuan() {
				uni.navigateTo({
					url: "/pages/verticalnav/index"
				})
			},
			onPullDownRefresh() {

			},
		}
	};
</script>

<style lang="scss" scoped>
	page,
	.content {
		background: #ffffff;
		height: 100%;

		.itemselect {
			color: #333333;
			font-weight: 600;
		}

		.search-box {
			width: calc(100% - 64rpx);
			margin: 52rpx 32rpx 0;
			height: 72rpx;
			background: #F1F2F3;
			border-radius: 12rpx;
			position: relative;

			.search-icon {
				margin: 0 20rpx;
			}

			.search-input {
				width: calc(100% - 20rpx);
				height: 100%;

			}
		}

		.tuijian-teacher {
			padding: 30rpx 32rpx;
			font-size: 24rpx;

			.title {
				font-size: 32rpx;
			}
		}

		.wrap-box {
			padding-left: 32rpx;

			.card-swiper1 {
				width: 100%;
				overflow-x: scroll;
				margin-bottom: 20rpx;
				text-align: center;
			}

			.swiper-item {
				width: 272rpx;
				height: 272rpx;
				border-radius: 16rpx;
				display: inline-block;
				margin: 10rpx 24rpx 10rpx 0rpx;
				box-shadow: 0rpx 0rpx 11rpx 1rpx rgba(206, 198, 193, 0.4400);

				.touxiang {
					width: 144rpx;
					height: 144rpx;
					border-radius: 50%;
					margin: 0 auto;
					margin-top: 24rpx;
				}
			}
		}

		.line {
			width: 100%;
			height: 16rpx;
			background: #F1F2F3;
		}

		.teacher-list {
			padding: 0 32rpx;

			.teacher-item {
				align-items: center;
				padding: 30rpx 0;
				border-bottom: 1rpx solid #DBDDE0;

				.avatar {
					width: 144rpx;
					height: 144rpx;
					border-radius: 50%;
				}

				.content {
					width: calc(100% - 144rpx);
					margin-left: 20rpx;
					font-size: 24rpx;
					color: #666666;

					.name {
						font-size: 32rpx;
						font-weight: 500;
						color: #333333;
						margin-bottom: 15rpx;
					}

					.produce {
						max-height: 64rpx;
						overflow: hidden;

					}
				}
			}
		}
	}
</style>
